<template>
  <div class="" style="width: 60%;">
    <div class="layout-center-top padding-10-px" style="background-color: #DDDDDD">
      <div class="width-100-per layout-left-top">
        <span style="width: 65px;text-align: right;padding-right: 5px;">评论添加:</span>
        <a-textarea placeholder="请输入评论内容....":rows="4" style="width: calc(100% - 65px);" v-model="repDDate.repEvaluateContents"/>
      </div>
      <div style="margin: 10px 0;" class="width-100-per layout-left-center">
        <span style="width: 60px;text-align: right;padding-right: 5px;">满意度:</span>
        <a-rate v-model="repDDate.satisfied"/>
      </div>
      <template>
        <a-button @click="addReD">发表</a-button>
      </template>
    </div>
    <div class="padding-10-px" style="">
      历史评论<br/>
      <div class="layout-left-top" style="width: 100%;padding: 10px 10px 5px 10px;border-bottom:1px #DDDDDD solid;">
        <div class="padding-10-px"><a-avatar :size="50" icon="user" /></div>
        <div class="" style="width: calc(100% - 70px);padding: 5px 5px 0 5px;">
          <div class="layout-left-top width-100-per padding-top-5px">
            <span style="width:50px;text-align: left;">****说：</span>
            <div style="width: calc(100% - 50px);word-wrap: break-word;text-align:left;word-break: break-all;overflow: hidden;" >
              {{content}}
            </div>
            <!--            <a-textarea placeholder="Basic usage" style="width: calc(100% - 50px);" v-model="content" :disabled="disable"/>-->
          </div>
          <div class="layout-side">
            <div style="font-size: 11px;color: #808080;">2019-99-99</div>
            <div style="margin-right: 20px;font-size: 11px;color: #808080;">
              <span>满意度:</span>
              <a-rate style="font-size: 13px;" v-model="ratesd"/>
            </div>
          </div>
        </div>
      </div>
      <div class="layout-left-top" style="width: 100%;padding: 10px 10px 5px 10px;border-bottom:1px #DDDDDD solid;" v-for="(user,index) in repairDetailsData" :key="index">
        <div class="padding-10-px"><a-avatar :size="50" :src="user.img"/></div>
        <div class="" style="width: calc(100% - 70px);padding: 5px 5px 0 5px;">
          <div class="layout-left-top width-100-per padding-top-5px">
            <span style="width:60px;text-align: left;">{{user.name}}:</span>
            <div style="width: calc(100% - 60px);min-height:50px;max-height:100px;word-wrap: break-word;text-align:left;word-break: break-all;overflow: hidden;" >
              {{user.content}}
            </div>
            <!--            <a-textarea placeholder="Basic usage" style="width: calc(100% - 50px);" v-model="content" :disabled="disable"/>-->
          </div>
          <div class="layout-side">
            <div style="font-size: 11px;color: #808080;">{{user.time}}</div>
            <div style="margin-right: 20px;font-size: 11px;color: #808080;">
              <span>满意度:</span>
              <a-rate style="font-size: 13px;" v-model="user.rate" allowHalf disabled/>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
</template>

<script>
  import {Avatar, Rate, Input, Button} from 'ant-design-vue'
  import moment from 'moment'

  export default {
    name: "RepairDetails",
    components:{
      AAvatar:Avatar,
      ARate:Rate,
      ATextarea:Input.TextArea,
      AButton:Button
    },
    data(){
      return{
        routerID:'',
        userID:'',
        repDDate:{
          repEvaluateContents:'',
          satisfied:0,
        },
        ratesd:4.5,
        disable:true,
        repairDetailsData:[],
        content:'888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888'
      }
    },
    mounted(){
      // console.log(JSON.parse(this.$store.getters.currentUser).id)
      // console.log('子页面',this.$route.query.id)
      this.routerID = this.$route.query.id;
      this.userID =  JSON.parse(this.$store.getters.currentUser).id;
      console.log(moment().format('YYYY-MM-DD / hh:mm:ss'))
      this.mountedMaterials();
    },
    methods:{
      handleReset(){
        this.repDDate={
          repEvaluateContents:'',
          satisfied:0,
        }
      },
      //新增评论
      addReD(){
        const that = this;
        if(that.repDDate.repEvaluateContents === ''){
          that.$message.error('未填写评价内容！');
          return;
        }
        if(that.repDDate.satisfied === 0){
          that.$message.error('未填写满意度！');
          return;
        }
        const newDate = []
        newDate.push({
          repEvaluateContents:that.repDDate.repEvaluateContents,
          repEvaluateTime:moment().format('YYYY-MM-DD/hh:mm:ss'),
          repId:that.routerID,
          satisfied:that.repDDate.satisfied,
          userId:that.userID
        });
        console.log(newDate[0]);
        // that.$apollo.mutate({
        //   mutation:require('../../../graphql/repair/mutation/saveRepair.gql'),
        //   variables:{entity:newDate[0]},
        // }).then((data)=>{
        //   that.$message.success("新增成功！");
        //   that.mountedMaterials();
        //   that.handleReset();
        // }).catch(error=>{
        //   console.log(error);
        // })

      },
      //初始化评论加载
      repairDetailsDataShow(e){
        const that = this;
        that.repairDetailsData = [];
        let newdata = e;
        for(let i=0;i< newdata.length;i++){
          that.$apollo.query({
            query:require('../../../graphql/army/query/findUserById.gql'),
            variables:{id:newdata[i].userId},
            fetchPolicy:'no-cache'
          }).then((datas)=>{
            const findUserById = datas.data.findUserById;
            that.repairDetailsData.push({
              key:newdata[i].id,
              img:findUserById.userImg,
              name:findUserById.name,
              content:newdata[i].repEvaluateContents,
              time:newdata[i].repEvaluateTime,
              rate:newdata[i].satisfied
            })
          }).catch((error)=>{
            console.log(error)
          })
        }
        console.log('******************',that.repairDetailsData)
      },
      //初始化评论获取
      mountedMaterials(){
        const that = this;
        that.$apollo.query({
          query:require('../../../graphql/repair/query/findAllByRepId.gql'),
          variables:{repId:that.routerID},
          fetchPolicy:'no-cache'
        }).then(data=>{
          const findAllByRepId = data.data.findAllByRepId;
          that.repairDetailsDataShow(findAllByRepId)
        }).catch(error=>{
          console.log(error)
        })
      },


    }
  }
</script>

<style scoped>

</style>